<template>
	<view class="box" style="padding: 0 30rpx;">
		
		<view v-if="list.length <= 0" style="margin-top: calc(50vh - 200rpx);">
			<u-empty
			font-size="30rpx"
			icon-size="400rpx" 	
			 text="暂无活动" 
			 src="/static/empty/coupon.png" 
			 mode="coupon"></u-empty>
		</view>

		<!-- <page-status status="empty"></page-status> -->
	
		<view v-if="list.length > 0" class="card_sty mb30" v-for="item in list" :key="item.id">
			<view class="flex_box aic">
				<view class="mr30 " style="width: 200rpx;position: relative;">
					<text class="aaaaa " 
					v-if="item.use_goods_type == 1" style="color: #909399;">全场通用</text>
					
					<text class="aaaaa " 
					v-if="item.use_goods_type == 2" style="color: #ff9900;">VIP专属</text>
					
					<text class="aaaaa "
					v-if="item.use_goods_type == 3" style="color: #19be6b;">新用户专享</text>
					
					
					<text class="aaaaa "
					v-if="item.use_goods_type == 4" style="color: #fa3534;">老用户专享</text>
					
					<text class="fs36 cor_F46">￥</text><text class="fs48">{{item.money}}</text>
				</view>
				<view class="item ov">
					<view class="fs30 fwb">{{item.name}}</view>
					<view class="mt20 cor_A1A">{{item.condition}}</view>
					<view class="mt15 cor_A1A">{{item.effective_time}}</view>
				</view>
				<view class="w185 r_bl1 df aic jcc">
					<view class="opr_btn_1" @click="liangqu(item.id)" v-if="item.is_available == 0" >领取</view>
					<view class="opr_btn_2" v-if="item.is_available == 1" >已领取</view>
				</view>
			</view>
		</view>
	
	
	</view><!-- box -->

</template>

<script setup lang="ts">
		import { apiCouponList,apiCouponGet} from '@/api/coupon'
		import { onLoad, onShow, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app'
		import { computed, reactive, ref, shallowRef, watch, nextTick } from 'vue'
		import { showImage, call, copy, lookMap } from "@/utils/tools.ts"
		import { storeToRefs } from 'pinia'
		import { useUserStore } from '@/stores/user'
		const userStore = useUserStore()
		const { userInfo, isLogin } = storeToRefs(userStore)
		
	
	const list = ref([]);
	
	const getList = async () => {
		let data = await apiCouponList({});
		list.value = data.lists
	}
		
	const liangqu = async (id:any) => {
		if (isLogin.value == false) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return false;
		}
		
		uni.showLoading({
			title:"加载中"
		})
		await apiCouponGet({id:id});
		uni.hideLoading();
		getList();
	}	
		
	onShow(() => {
		getList();
	})
		
</script>

<style lang="scss" scope>
	.aaaaa{
		top:-50rpx;
		// transform: rotate(-45deg);
		left:-20rpx;
		position: absolute;
	}
	page {
		background: #F4F6F8;
		padding-top: 30rpx;
	}

	.tab_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: 5;
	}

	.tab_box .item_tab {
		position: relative;
		display: inline-flex;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #333;
	}

	.tab_box .item_tab::after {
		content: "";
		display: none;
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 60rpx;
		height: 6rpx;
		background: #F0370D;
		border-radius: 3rpx;
		z-index: 2;
		margin-left: -30rpx;
	}

	.tab_box .active.item_tab::after {
		display: block;
	}

	.card_sty {
		position: relative;
		padding: 30rpx 0 30rpx 30rpx;
		font-size: 24rpx;
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.card_sty::after {
		content: "";
		position: absolute;
		right: 168rpx;
		width: 30rpx;
		height: 30rpx;
		background: #F4F6F8;
		border-radius: 50%;
		z-index: 2;
	}

	.card_sty::before {
		content: "";
		position: absolute;
		right: 168rpx;
		width: 30rpx;
		height: 30rpx;
		background: #F4F6F8;
		border-radius: 50%;
		z-index: 2;
	}

	// .card_sty::after,.card_sty::before {
	//   content: "";
	//   position: absolute;
	//   right: 168rpx;
	//   width: 30rpx;
	//   height: 30rpx;
	//   background: #F4F6F8;
	//   border-radius: 50%;
	//   z-index: 2;
	// }

	.card_sty::after {
		top: -15rpx;
	}

	.card_sty::before {
		bottom: -15rpx;
	}

	.opr_btn_1,
	.opr_btn_2 {
		position: relative;
		width: 120rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		font-size: 26rpx;
		color: #fff;
		border-radius: 8rpx;
	}

	.opr_btn_1 {
		background: linear-gradient(90deg, #FF791A 0%, #EF330C 100%);
		box-shadow: 0rpx 6rpx 20rpx 0rpx #FFAE9A;
	}

	.opr_btn_2 {
		background: #ccc;
	}

	.popup_area_sty {
		position: relative;
		width: 440rpx;
		padding: 40rpx;
		background: #fff;
		border-radius: 20rpx;
	}

	.rule_h_acroll {
		position: relative;
		font-size: 30rpx;
		line-height: 44rpx;
		color: #333;
		max-height: 320rpx;
		overflow-y: auto;
	}

	.btn_ok_sty {
		position: relative;
		width: 200rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background: linear-gradient(90deg, #FF791A 0%, #EF330C 100%);
		box-shadow: 0rpx 6rpx 20rpx 0rpx #FFAE9A;
		border-radius: 34rpx;
		margin-left: auto;
		margin-right: auto;
	}
</style>